html,body{
    margin: 0;
    padding: 0;
}
.light-theme{
    --theme-color:#6E35AE;
    --theme-dark-color:#222A42;
    --theme-color-2:#1989fa;
    --border-color-gray: #e7e7e7;
    --success-color:#407D54;
    --error-color:#9E2E22;
}
.flex-1{
    flex: 1;
}
.flex-wrap{
    flex-wrap: wrap;
}
.flex-row{
    display: flex;
}
.flex-row-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-row-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-col{
    display: flex;
    flex-direction: column;
}
.flex-col-center{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}
.flex-col-center-start{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
}
.flex-row-start-center{
    display: flex;
    justify-content: start;
    align-items: center;


}
.flex-row-end-center{
    display: flex;
    justify-content: end;
    align-items: center;


}
.clickable{
    cursor: pointer;
    transition: opacity 0.5s;
}
.clickable:hover{
    opacity: 0.8;
}

.padding-row-10{
    padding: 0 5px;
}
.padding-col-10{
    padding: 5px 0 ;
}
.padding-col-20{
    padding: 20px 0 ;
}
.margin-col-5{
    margin: 5px 0;
}
.margin-col-10{
    margin: 10px 0 ;
}
.margin-col-20{
    margin: 20px 0 ;
}
.margin-col-50{
    margin: 50px 0 ;
}
.margin-row-5{
    margin: 0 5px;
}
.margin-row-10{
    margin: 0 10px;
}
.margin-row-40{
    margin: 0 40px;
}
.width-100-percent{
    width: 100%;
}
.width-90-percent{
    width: 90%;
}
.width-80-percent{
    width: 80%;
}
.height-100-percent{
    height: 100%;
}
.height-90-percent{
    height: 90%;
}
.void-status{
    color: gray;
}
.success-status {
    color: #407D54;
}
.error-status {
    color: #9E2E22;
}
.active-status{
    color: var(--theme-color);
}
.font-size-12{
    font-size: 12px;
}
.font-size-14{
    font-size: 14px;
}
.color-gray{
    color: #949494;
}

.box-shadow-common{
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);
}
.bg-black{
    background-color: black;
}
.bg-red{
    background-color: red;
}
@keyframes swing-row {
    50%{
        transform: translateX(-0.1em);
    }
    100%{
        transform: translateX(0.1em);
    }
}
@keyframes swing-col {
    50%{
        transform: translateY(-0.1em);
    }
    100%{
        transform: translateY(0.1em);
    }
}
@keyframes blink{
    50%{
        border-bottom: 3px solid var(--theme-color);
    }
    100%{
        border-bottom: 3px solid transparent;
    }
}

/*::-webkit-scrollbar {!*滚动条整体样式*!*/
/*    width: 13px;     !*高宽分别对应横竖滚动条的尺寸*!*/
/*    height: 13px;*/
/*}*/
/*::-webkit-scrollbar-thumb {!*滚动条里面小方块*!*/
/*    border-radius: 10px;*/
/*    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
/*    !*background: white;*!*/
/*    background-color: #4FA485;*/
/*}*/
/*::-webkit-scrollbar-track {!*滚动条里面轨道*!*/
/*    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
/*    !*border-radius: 10px;*!*/
/*    background: white;*/
/*}*/